import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomSheet',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        splashColor: Colors.transparent,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 定义key
  final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 定义key
      key: _bottomSheetScaffoldKey,
      appBar: AppBar(
        title: Text('BottomSheet'),
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
                onPressed: _showBottomSheet, child: Text('Show BottomSheet')),
            TextButton(
                onPressed: _showModalBottomSheet,
                child: Text('Show Modal BottomSheet')),
          ],
        ),
      ),
    );
  }

  _showBottomSheet() {
    _bottomSheetScaffoldKey.currentState.showBottomSheet((context) {
      return BottomAppBar(
        child: Container(
          width: double.infinity,
          height: 90.0,
          padding: EdgeInsets.all(16.0),
          child: Row(
            children: [
              Icon(Icons.pause_circle_outline),
              SizedBox(
                width: 16.0,
              ),
              Text('01:30 / 03:40'),
              Expanded(
                  child: Text(
                '烟花易冷 - 周杰伦',
                textAlign: TextAlign.right,
              ))
            ],
          ),
        ),
      );
    });
  }

// 底部弹出选择框
  Future _showModalBottomSheet() async {
    final result = await showModalBottomSheet(
        context: context,
        builder: (ctx) {
          return Container(
            height: 200.0,
            child: Column(
              children: [
                ListTile(
                  title: Text("Option A"),
                  // 关闭BottomSheet并返回结果
                  onTap: () => Navigator.of(context).pop("A"),
                ),
                ListTile(
                  title: Text("Option B"),
                  // 关闭BottomSheet并返回结果
                  onTap: () => Navigator.of(context).pop("B"),
                ),
                ListTile(
                  title: Text("Option C"),
                  // 关闭BottomSheet并返回结果
                  onTap: () => Navigator.of(context).pop("C"),
                ),
              ],
            ),
          );
        });

    print('选择的结果为：$result');
  }
}
